<template>
	<view class="cus-service-center">
		<u-navbar
			safeAreaInsetTop
			fixed
			leftIconColor="#fff"
			leftText="客服中心"
			:autoBack="true"
			bgColor="transparent"
		/>
		<view class="cus-title">Hi，{{name}}</view>
		<view class="cus-desc">欢迎来到客服中心，服务让旅游更便捷！</view>
		<view class="cus-center-content">
			<view class="search-box">
				<u-icon name="search" color="#0E9589"></u-icon>
				搜索问题
			</view>
			<view class="tab-box">
				<u-tabs
				:list="[{name: '猜你想问'}, {name: '预约须知'}]"
				lineHeight="0"
				@change="tabChange"
				:activeStyle="{
					color: '#333333',
					fontWeight: 'bold',
					lineHeight: '42rpx',
					fontSize: '36rpx'
				}"
				:inactiveStyle="{
					color: '#666666',
					lineHeight: '42rpx',
					fontSize: '32rpx'
				}"
				itemStyle="padding-right: 44rpx; height: 42rpx;"
				>
				</u-tabs>
				<swiper class="swiper" :current="current" :duration="500" :interval="2000" :indicator-dots="false" circular @change="setCurrent">
					<swiper-item v-for="item in pages" :key="item" :item-id="item">
						<view class="swiper-item-img-box">
							<view class="pro-box" v-for="i, idx in proList" :key="idx">
								<view class="pro-item" :style="{borderWidth: (idx + 1) % 6 === 0 ? 0 : '2rpx'}" v-if="idx < (item + 1) * 6 && idx >= item * 6" @click="titleClick(i)">
									<view class="num" :style="{color: idx === 0 ? '#F34A30' : idx === 1 ? '#F7643C' : idx === 2 ? '#FCB261' : '#C0C0C0'}">
										{{idx + 1}}
									</view>
									<view class="pro-title">{{i.question || '-'}}</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="dot-box">
					<view class="dot-item" :style="{width: idx === current ? '32rpx' : '8rpx', background: idx === current ? '#01756B' : '#C0C0C0'}" v-for="idx in pages" :key="idx"></view>
				</view>
			</view>
			<view class="botom-line"></view>
		</view>
		<u-tabbar
			:fixed="true"
			:placeholder="false"
			:border="false"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item text="智能客服" :icon="config.imgUrl+'home/cusSer.png'" @click="click1" ></u-tabbar-item>
			<u-tabbar-item text="咨询热线" :icon="config.imgUrl+'home/phone.png'" @click="click2" ></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
import config from "@/config";
import {getList, rsSort, getInfo} from '@/api/customCenter/index';
	export default {
		data() {
			return {
				config,
				current: 0,
				name: '',
				params: {
					pageNum: 1,
					pageSize: 24,
				},
				proList: [],
				pages: 1
			}
		},
		onLoad(options) {
			this.getListFn(1);
			this.getInfoFn();
		},
		methods: {
			click1() {
				uni.navigateTo({
					url:`/pages/intelCusService/intelCusService`
				})
			},
			click2() {
				uni.makePhoneCall({
					phoneNumber: '15555555555' //仅为示例
				});
			},
			titleClick(item){
				
				uni.navigateTo({
					url:`/pages/intelCusService/intelCusService?id=${item.id}`
				})
				// rsSort({
				// 	id: item.id
				// }).then(res => {
				// 	console.log(item);
				// 	return
				// 	uni.navigateTo({
				// 		url:`/pages/intelCusService/intelCusService?type=${item.question}`
				// 	})
				// })
			},
			getListFn(type) {
				getList({
					...this.params,
					type
				}).then(res => {
					this.proList = res?.data?.rows || []
					let total = res?.data?.rows?.length || 0
					this.pages = (total % 6 ) ? Number(Math.floor(total/6)) + 1 : Number(Math.floor(total/6));
				})
			},
			getInfoFn() {
				getInfo().then(res => {
					this.name = res?.user?.nickName || ''
				})
			},
			setCurrent (e) {
				// console.log(e);
				this.current = e.target.current;
			},
			tabChange(item) {
				this.current = 0;
				this.getListFn(item.index + 1);
			}
		}
	}
</script>

<style lang="scss">
.cus-service-center {
	padding-top: 208rpx;
	background: #0E9589;
	.cus-title {
		height: 40rpx;
		font-size: 32rpx;
		font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 40rpx;
		padding-left: 32rpx;
	}
	.cus-desc {
		height: 40rpx;
		font-size: 28rpx;
		font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
		font-weight: 500;
		color: #A3D7D2;
		line-height: 40rpx;
		padding-left: 32rpx;
		margin: 16rpx 0 40rpx;
	}
	.search-box {
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #01756B;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		padding: 16rpx 32rpx;
		color: #999999;
		border: 2rpx solid #01756B;
		.u-icon {
			margin-right: 16rpx;
		}
	}
	.cus-center-content {
		padding: 36rpx 32rpx ;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		background: #F2F2F2;
		position: relative;
		.tab-box {
			position: relative;
			z-index: 2;
		}
		.dot-box {
			display: flex;
			margin-top: 32rpx;
			align-items: center;
			justify-content: center;
			height: 8rpx;
			.dot-item {
				background: #C0C0C0;
				border-radius: 2rpx;
				width: 8rpx;
				height: 8rpx;
				margin-right: 10rpx;
			}
		}
		.swiper {
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.1);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 16rpx 32rpx 0;
			height: 600rpx;
			.pro-item {
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #F2F2F2;
				// padding: 32rpx 0;
				.num {
					height: 98rpx;
					font-size: 32rpx;
					font-family: DingTalk JinBuTi-Regular, DingTalk JinBuTi;
					font-weight: 400;
					line-height: 98rpx;
					margin-right: 16rpx;
				}
				.pro-title {
					height: 98rpx;
					font-size: 32rpx;
					font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
					font-weight: 400;
					color: #333333;
					line-height: 98rpx;
				}
				
			}
			.pro-box:nth-last-of-type(1) {
				.pro-title {
					border: none;
				}
			}
		}
		.botom-line {
			position: relative;
			bottom: 48rpx;
			z-index: 1;
			height: 24rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.1);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			width: calc(100% - 128rpx);
			left: 64rpx;
		}
	}

	.u-tabs {
		margin: 48rpx 0 40rpx;
		.u-tabs__wrapper__nav__item {
			padding: 0;
		}
	}
	.u-tabbar__content__item-wrapper {
		position: relative;
		&::after {
			content: '';
			width: 2rpx;
			height: 32rpx;
			background-color: #F2F2F2;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
		}
		.u-tabbar-item {
			flex-direction: row !important;
			color: #333333;
			.u-tabbar-item__icon {
				width: unset;
				margin-right: 16rpx;
				image {
					width: 32rpx !important;
					height: 32rpx !important;
				}
			}
		}
	}

}

</style>
